<template>
	<view>
		<u-navbar immersive  back-icon-color="#000" title="我的团队" :border-bottom="false" title-color="#000" :background="{}"></u-navbar>
		<view class="top-con">
			<view class="top-bg"></view>
			<view class="card">
				<view class="u-flex nums">
					<view>{{vuex_user.oneTeam}}</view>
					<view>{{vuex_user.twoTeam}}</view>
				</view>
				<u-tabs :list="list" :is-scroll="false" bar-height="4" active-color="#00BBAA" inactive-color="#555" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		
		<view class="title">团队详情</view>
		<view class="list">
			<view class="item u-flex" v-for="(item,index) in lists[current]" :key="index">
				<image :src="item.headimg"></image>
				<view class="info u-flex-1">
					<view class="name u-flex">
						<view class="num1 u-line-1">{{item.nickname}}</view>
						<view class="num2">已邀{{item.recommendCount || 0}}人</view>
					</view>
					<view class="phone">{{item.mobile || ''}}</view>
				</view>
			</view>
		</view>
		
		<view class="safe-area-inset-bottom"></view>
		
		<view class="guize safe-area-inset-bottom">
			<view class="box-r" @click="jump('/pages/news/article?id=13')">
				<view style="height: 10rpx;"></view>
				<u-icon name="file-text" size="46"></u-icon>
				<view>规则</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '一级伙伴人数'
				}, {
					name: '二级伙伴人数'
				}],
				current: 0,
				lists:{'0':[],'1':[]},
				page:{'0':1,'1':1},
				status:{'0':'loading','1':'loading'},
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getList(indexs){
				const index = indexs === undefined ? this.current : indexs
				this.status[index] = 'loading'
				this.$u.api.myTeam({
					type:index + 1,
					page:this.page[index],
					limit:15
				}).then(res=>{
					this.lists[index] = this.page[index] == 1 ? res : this.lists[index].concat(res)
					this.status[index] = res.length  === 15 ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			}
		},
		onLoad() {
			this.getList(0)
			this.getList(1)
		},
		onReachBottom() {
			const index = this.current
			if(this.status[index] == 'loadmore'){
				this.page[index] ++
				this.getList()
			}
		},
		onPullDownRefresh() {
			const index = this.current
			this.page[index] = 1
			this.getList(index)
		}
	}
</script>

<style lang="scss">
	.top-con{position: sticky;top: 0;}
	.top-bg{
		background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);
		padding-top: var(--status-bar-height);
		position: relative;height: 360rpx;overflow: hidden;width: 100%;top: 0;box-sizing: content-box;
		&::after{content: '';display: block;position: absolute;bottom: -195rpx;left: 50%;transform: translateX(-50%);border: 200rpx solid #fff;width: 2500rpx;height: 2500rpx;border-radius: 50%;}
	}
	// 卡片
	.card{
		box-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.08);border-radius: 20rpx;background-color: #fff;padding-bottom: 30rpx;
		position: absolute;width: 88%;left: 6%;margin-top: 30rpx;bottom: 0;
		.nums{justify-content: space-around;font-weight: bold;font-size: 32rpx;height: 100rpx;
		}
	}
	.title{font-weight: bold;font-size: 28rpx;padding: 30rpx 0 30rpx 60rpx;}
	.list{
		padding: 0 50rpx;
		.item{
			padding: 30rpx 0;border-bottom: 1rpx solid #ddd;
			image{width: 100rpx;height: 100rpx;border-radius: 50%;flex-shrink: 0;}
			.info{margin-left: 20rpx;overflow: hidden;
				.name{
					justify-content: space-between;white-space: nowrap;
					.num1{font-size: 28rpx;font-weight: bold;}
					.num2{color: #666;}
				}
				.phone{color: #666;padding-top: 20rpx;font-size: 26rpx;}
			}
		}
	}
	.guize{position: fixed;right: 60rpx;bottom: 100rpx;box-sizing: content-box;width: 100rpx;
		.box-r{width: 100rpx;height: 100rpx;border-radius: 50%;
			box-shadow: 6rpx 6rpx 16rpx rgba(0, 0, 0, 0.1);}background-color: #fff;font-size: 28rpx;text-align: center;
	}
</style>
